<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" :popper-offset="16" style="max-width: 100%;">
          <template v-for="(item, index) in menus" :key="item" >
              <el-menu-item :index="index" @click="handSelect" >
                {{item.name}}
              </el-menu-item>
          </template>
        </el-menu>

      </el-header>
      <el-container>
        <el-aside>
          <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group>
                <template #title><span>Group One</span></template>
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title><span>item four</span></template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <template #title>Navigator Two</template>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon>
                <document />
              </el-icon>
              <template #title>Navigator Three</template>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon>
                <setting />
              </el-icon>
              <template #title>Navigator Four</template>
            </el-menu-item>
          </el-menu>

        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { RouterView } from 'vue-router'
import router from '@/router'
console.log("router", router.getRoutes())
const menus = router.getRoutes();

const handSelect = (e) => {
  const menu = menus[e.index];
  console.log("menu", menu)
  router.push(menu.path)
}

</script>

<style scoped>
/* 头部完全填充 */
.el-header {
  padding: 0 0;
}
.el-aside {
  background-color: #ebf3f3;
  max-width: 190px; 
  min-height: 1000px
}
</style>